<!doctype html>
<html>
    <head>
		<title>网页标题</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="./js/drag.js"></script>
		<script  type="text/javascript">
			onload=function(){
				var target=document.getElementById("create_user_bg");
				var close=document.getElementById("create_user_bg").childNodes[1].childNodes[0];
				var move=document.getElementById("create_user_bg").childNodes[1];
				
				close.onclick=function(e){
					 e.preventDefault();
				     e.stopPropagation();
					document.getElementById("create_user_bg").style.display="none";
				}
				var b=new drag(move,target,function(){
					//alert();
				});
				//console.log(attrStyle(target,"background-color"));
				var c=new drag(document.getElementById("create_user_bg2").childNodes[1],document.getElementById("create_user_bg2"));


				var d=new drag(document.getElementById("box"),document.getElementById("box"));
			}
			function attrStyle(elem,attr){ 
					if(elem.attr){ 
						//若样式存在于html中,优先获取 
						return elem.style[attr]; 
					}else if(elem.currentStyle){ 
						//IE下获取CSS属性最终样式(同于CSS优先级) 
						return elem.currentStyle[attr]; 
					}else if(document.defaultView && document.defaultView.getComputedStyle){ 
						//W3C标准方法获取CSS属性最终样式(同于CSS优先级) 
						//注意,此法属性原格式(text-align)获取的,故要转换一下 
						attr=attr.replace(/([A-Z])/g,'-$1').toLowerCase(); 
						//获取样式对象并获取属性值 
						return document.defaultView.getComputedStyle(elem,null).getPropertyValue(attr); 
					}else{ 
						return null; 
					} 
				} 
		</script>
		<link href="" rel="stylesheet" type="text/css">
		<style type="text/css">
		 *{margin:0 auto}
		 body{
		 	background: #F7F7F7;
		 }	

			#create_user_bg,
			#create_user_bg2{
				position: absolute;
				z-index: 2000;
				top:35%;
				left:35%;
				width:30%;
				height:40%;
				background: #F5F5F5;
				border:solid 1px #D8D8D8;
				border-radius: 5px;
				box-shadow: 0 0 20px rgba(33,35,38,0.5);
				
			}
			#create_user_bg2{
		 		left: 0px;
		 		top:200px;
		 	}
			#create_user_bg .biaoti,
			#create_user_bg2 .biaoti{
				width: 100%;
				height:25px;
				border-radius:5px 5px 0 0;
				border-bottom:solid 1px #D8D8D8;
				background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DDDDDD));
			    background: -moz-linear-gradient(#FFFFFF,#DDDDDD);
				background: -o-linear-gradient(#FFFFFF,#DDDDDD);
				background: linear-gradient(#FFFFFF,#DDDDDD);
			}
			#create_user_bg .biaoti .close,
			#create_user_bg2 .biaoti .close{
				width: 30px;
				height: 20px;
				background: #EAEAEA;
				float:left;
				font-size: 10px;
				line-height: 20px;
				margin-top: 3px;
				border:solid 1px #D8D8D8;
				border-radius: 10px;
				text-align: center;
			}
			#box{
				width:300px;
				height: 200px;
				background: #EAEAEA;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="create_user_bg" >
			<div class="biaoti"><span class="close">关闭</span></div>
			1
		</div>
		<div id="create_user_bg2" >
			<div class="biaoti"><span class="close">关闭</span></div>
			2
		</div>
		<div id="box"></div>
		<div id="debug" style="color:#17B75A"></div>
	</body>
</html>